<template>
  <div class="zui-search">
    <div class="zui-input-box"><input type="text" class="zui-input">
      <div class="zui-search-placeholder zui-flex-center">
        <span class="zui-placeholder zui-font16">搜索课程名称</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "zui-search"
}
</script>

<style scoped>

.zui-font16 {
  font-size: 16px;
}

.zui-search {
  padding: 0.16rem 0.3rem;
  font-size: .32rem;
  background-color: #FFFFFF;
  height: 34px;
}

.zui-search .zui-input-box {
  position: relative;
  background-color: transparent;
  border-radius: 9px;
  color: #606266;
  overflow: hidden
}

.zui-search .zui-input-box .zui-input {
  position: relative;
  z-index: 9;
  -webkit-appearance: none;
  background-image: none;
  background-color: #f4f4f4;
  border: none;
  box-sizing: border-box;
  display: inline-block;
  font-size: inherit;
  height: 34px;
  line-height: .68rem;
  outline: 0;
  padding: 0 .3rem;
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%
}

.zui-search .zui-search-placeholder {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  text-align: center;
  overflow: hidden;
  background-color: #f4f4f4;
  padding: 0 .3rem 0 .2rem
}

.zui-search .zui-search-placeholder .zui-placeholder {
  height: 100%;
  line-height: 34px
}
</style>
